import { compileToFunction } from "./compiler/index";
import { initState } from "./state";
import { callHook, mountComponent } from "./lifecycle";
import { mergeOptions } from "./utils";
export function initMixin(Vue) {
  // 初始化方法
  Vue.prototype._init = function (options) {
    const vm = this;
    // 子类vm.constructor.options是子类的options
    vm.$options = mergeOptions(vm.constructor.options, options);
    // vue里面核心特性，响应式数据原理
    // vue是一个什么样的框架 MVVM
    // 数据变化视图会更新， 视图变化数据会被影响  mvvm不能跳过数据去更新视图

    // 初始化状态 将数据做一个初始化的劫持 当我改变数据时应该更新视图
    // vue组件中有很多状态 data props watch computed...
    callHook(vm, "beforeCreate");
    initState(vm);
    callHook(vm, "created");
    if (vm.$options.el) {
      // 将数据挂载到这个模板上
      vm.$mount(vm.$options.el);
    }
  };

  Vue.prototype.$mount = function (el) {
    const vm = this;
    const options = vm.$options;
    el = document.querySelector(el);
    vm.$el = el;
    // 把模板转换成 对应的渲染函数=》 虚拟dom 概念  vnode 更新虚拟dom =》 产生真实节点，更新
    if (!options.render) {
      let template = options.template;
      if (!template && el) {
        // 用户没有传递template 就取el得内容作为模板
        template = el.outerHTML;
      }
      let render = compileToFunction(template);
      options.render = render;
    }
    // 调用render方法，渲染成真实dom 替换掉页面的内容
    // console.log(options.render);
    // 组件的挂载流程
    mountComponent(vm, el);
  };
}
